<template>
  <div class="recommend">
    <div class="title">
      <div class="name">热门推荐</div>
      <p class="active"></p>
    </div>

    <div class="goods-show">
      <div
        v-for="item in goodlist"
        :key="item.id"
        class="good-list"
        @click="
          $router.push({
            path: '/category',
            query: {id:item.id},
          })
        "
      >
        <img v-lazy="item.imgs.split(`||`)[0]" class="imgs" />
        <div class="desc">
          <p class="good-name">{{ item.name.substr(0, 10) + "..." }}</p>
          <span class="price">￥{{ item.price }}</span>
          <span class="views">浏览量{{ item.agoprice }}</span>
          <van-icon name="shopping-cart-o" tag="p" @click.stop="add(item)" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: ["goodlist"],
  methods: {
    add(item) {
      console.log(this);
      this.$emit("add_cart", item);
      console.log(item);
    },
  },
};
</script>

<style lang="scss" scoped>
.title {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .name {
    width: 100%;
    text-align: center;
  }
  .active {
    background: red;
    width: 40px;
    height: 3px;
    margin: 10px 0;
  }
}

// .goods-show{
//   display: flex;
//   justify-content: space-between;
//   flex-wrap: wrap;
// }

.good-list {
  width: 100%;
  display: block;
  padding: 10px;
  // background: powderblue;
  border-radius: 5px;
  margin: 10px 5px;
  background: #eee;
  border-radius: 5px;
  display: flex;
}
.imgs {
  width: 40%;
}
.desc {
  flex: 1;
  height: 100%;
  text-align: left;
  padding: 0 20px;
  overflow-x: hidden;
}
.good-name {
  margin-bottom: 20px;
  padding-bottom: 60px;
}
.price {
  text-align: right;
  color: red;
  font-size: 14px;

  margin-right: 40px;
  font-weight: 600;
}
.views {
  font-size: 12px;
  text-align: right;
}
.van-icon-shopping-cart-o {
  display: block;
  text-align: right;
  font-size: 30px;
  padding-right: 20px;
  color: orange;
}
</style>